<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import SytWebCam from '@/components/SytWebCam/SytWebCam.vue'
  import config from '@/config'
  import { findCams, findGroups } from '@/api/webCam'
  import { arr2Tree } from '@/utils'
  import Model from '@/views/Model/Model.vue'

  let wsUrl = ref(`ws://${config.url.hostname}:10000/`)

  const groupsDataFlat = ref([])
  const groupsData = ref([])
  const camsData = ref([])
  const dialogCamRef = ref()
  const currentGroups = ref([])
  const treeRef = ref()

  const handleCheck = (data, checkedObj) => {
    currentGroups.value = checkedObj.checkedKeys
  }

  const getGroups = async () => {
    findGroups().then((res) => {
      if (res.code === 200) {
        groupsDataFlat.value = res.data
        groupsData.value = arr2Tree(res.data)
      }
    })
  }

  const getCams = async () => {
    await findCams().then((res) => {
      if (res.code === 200)
        camsData.value = res.data.map(cam => {
          const camParams = {
            id: cam.id,
            group: cam.group,
            groupName: cam.groupName,
            name: cam.name,
            webCam: {
              ip: cam.camIp,
              username: cam.camUsername,
              password: cam.camPassword,
              channel: cam.camChannel,
              subtype: cam.camSubtype
            },
            nvr: {
              ip: cam.nvrIp,
              username: cam.nvrUsername,
              password: cam.nvrPassword,
              channel: cam.nvrChannel,
              subtype: cam.nvrSubtype
            }
          }

          return camParams
        })
    })
  }

  const dialogVisible = ref(false)
  const dialogData: any = ref({})

  const openDialog = (item) => {
    dialogVisible.value = true
    dialogData.value = item
  }

  const closeDialog = () => {
    dialogCamRef.value.stop()
  }

  const initData = async () => {
    await getGroups()
    await getCams()

    // 默认全选
    currentGroups.value = groupsDataFlat.value.map(g => g.id)
    treeRef.value.setCheckedKeys([groupsData.value[0]?.id])
  }

  onMounted(() => {
    initData()
  })
</script>

<template>
  <div class="box">
    <el-tree ref="treeRef" class="groups-box" :data="groupsData" node-key="id" :props="{ label: 'name' }" default-expand-all
      @check="handleCheck" show-checkbox>
      <template #default="{ node }">
        <span style="font-size: 16px;">{{ node.label }}</span>
      </template>
    </el-tree>
    <div class="cams-box">
      <div v-for="item of camsData.filter(cam => currentGroups.includes(cam.group))" :key="item.id" class="cam">
        <SytWebCam :ws-url="wsUrl" :params="item" class="cam-item"></SytWebCam>
        <div class="name">{{ item.groupName }} - {{ item.name }}</div>
        <div class="cam-mask" @click="openDialog(item)"></div>
      </div>

      <Model @mousedown="() => {
        openDialog(camsData[0])
      }"></Model>
    </div>
    <el-dialog v-model="dialogVisible" :title="dialogData.name" @close="closeDialog">
      <SytWebCam ref="dialogCamRef" :ws-url="wsUrl" :params="dialogData" class="dialog-cam"></SytWebCam>
    </el-dialog>
  </div>
</template>

<style scoped>
  .box {
    height: 100%;
    display: flex;
    align-items: start;
  }

  .groups-box {
    width: 220px;
    height: 100%;
    margin-right: 10px;
    border-right: 1px solid rgb(0 0 0 / 0.1);
    overflow: scroll;
  }

  .cams-box {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
  }

  .cam {
    width: 500px;
    height: 300px;
    position: relative;
    margin: 1px;
  }

  .name {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 2;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
  }

  .cam-mask {
    cursor: pointer;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .cam-item {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .dialog-cam {
    width: 100%;
  }
</style>
